﻿<!DOCTYPE html>
<html>
<head>
    ${{include:part/head-common.html}}
    <title>编程入门&nbsp;-&nbsp;${{title}}</title>
    <link href="/static/book.css" rel="stylesheet" />
    <link href="/static/prism.css" rel="stylesheet" />
    <script>
        window.MathJax = {
            options: {
                renderActions: {
                    addMenu: [0, '', '']
                }
            },
            tex: {
                inlineMath: [['$', '$'], ['\\(', '\\)']]
            },
            svg: {
                fontCache: 'global'
            }
        };
    </script>
    <script src="/static/tex-svg.js" async></script>
</head>

<body>
    <div class="layout-row topbar-container">
        <div class="layout-row-content">
            <nav class="topbar">
                ${{include:part/toplinks.html}}
                <div class="menu-toggles">
                    <a data-menu-id="book-over-menu">章节</a>
                    <a data-menu-id="article-over-menu">大纲</a>
                </div>
            </nav>
        </div>
    </div>

    <div class="layout-row">
        <div class="layout-row-content reader-area">

            <div class="switch-menu-rail">
                <div class="switch-menu-in-view">
                    <ul id="menu-switcher" class="menu-switcher">
                        <li id="article-menu-switcher" data-menu-id="article-menu-in-switch" data-active>大纲</li>
                        <li id="book-menu-switcher" data-menu-id="book-menu-in-switch">章节</li>
                    </ul>
                    <div id="menu-box" class="menu-box">
                        <div id="article-menu-in-switch" class="menu-content" data-active>
                            ${{article-menu}}
                        </div>
                        <div id="book-menu-in-switch" class="menu-content">
                            ${{book-menu}}
                        </div>
                    </div>
                    <script>
                        (function() {
                            const articleSwitch = document.getElementById("article-menu-switcher");
                            const bookSwitch = document.getElementById("book-menu-switcher");
                            const articleMenu = document.getElementById("article-menu-in-switch");
                            const bookMenu = document.getElementById("book-menu-in-switch");

                            const storage = window.sessionStorage;

                            if (storage.getItem("active-switch-menu-id") === "book-menu-in-switch") {
                                const d = "data-active";
                                articleSwitch.removeAttribute(d);
                                articleMenu.removeAttribute(d);
                                bookSwitch.setAttribute(d, "");
                                bookMenu.setAttribute(d, "");
                            }

                            const bookMenuPos = storage.getItem("scroll-pos-of-book-menu-in-switch");
                            if (bookMenuPos != null) {
                                bookMenu.scrollTop = bookMenuPos;
                            }
                        })();
                    </script>
                </div>
            </div>
            <div class="article-menu-rail">
                <div class="article-menu-in-view">
                    <aside class="menu-content">
                        ${{article-menu}}
                    </aside>
                </div>
            </div>
            <div class="content-area">
                <div class="article-title">${{title}}</div>
                <div class="prev-and-next">
                    <div class="prev"><span class="arrow left-arrow">⋘</span><a href="${{prev-uri}}">${{prev-title}}</a>
                    </div>
                    <div class="next"><a href="${{next-uri}}">${{next-title}}</a><span
                            class="arrow right-arrow">⋙</span>
                    </div>
                </div>
                <article>
                    ${{content}}
                    <section>
                        <p><strong>上一篇：<a href="${{prev-uri}}">${{prev-title}}</a></strong></p>
                        <p><strong>下一篇：<a href="${{next-uri}}">${{next-title}}</a></strong></p>
                    </section>
                </article>
            </div>
            <div class="book-menu-rail">
                <div class="book-menu-in-view">
                    <aside id="book-menu-in-rail" class="menu-content">
                        ${{book-menu}}
                    </aside>
                    <script>
                        (function() {
                            const bookMenu = document.getElementById("book-menu-in-rail");
                            const scrollPos = window.sessionStorage.getItem("scroll-pos-of-book-menu-in-rail");
                            if (scrollPos != null) {
                                bookMenu.scrollTop = scrollPos;
                            }
                        })();
                    </script>
                </div>
            </div>
        </div>
        <div id="menu-layer" class="menu-layer">
            <div class="menu-layer-in-view">
                <div class="menu-layer-mask"></div>
                <div id="book-over-menu" class="menu-layer-rail book-menu-width menu-layer-menu">
                    <div id="book-over-menu-content" class="menu-content">${{book-menu}}</div>
                </div>
                <div id="article-over-menu" class="menu-layer-rail article-menu-width menu-layer-menu">
                    <div class="menu-content">${{article-menu}}</div>
                </div>
            </div>
        </div>
        <script>
            (function() {
                const storage = window.sessionStorage;
                const menuLayer = document.getElementById("menu-layer");
                const bookMenu = document.getElementById("book-over-menu");
                const isBookMenuActive = storage.getItem("book-over-menu-is-active");
                if (isBookMenuActive == "true") {
                    menuLayer.setAttribute("data-active", "");
                    bookMenu.setAttribute("data-active", "");
                }
                const bookMenuContent = document.getElementById("book-over-menu-content");
                const bookMenuContentScrollPos = window.sessionStorage.getItem("scroll-pos-of-book-over-menu-content");
                if (bookMenuContentScrollPos != null) {
                    bookMenuContent.scrollTop = bookMenuContentScrollPos;
                }
            })();
        </script>
    </div>


    <footer>
        001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020
    </footer>

    <script src="/static/book.js"></script>
    <script src="/static/prism.js"></script>
</body>

</html>

